
"use client";

import { Avatar, Dropdown, Navbar, Button, Modal, TextInput, Footer, Clipboard } from "flowbite-react";
import { useState } from "react";
export default function CommonNavBar() {
    const [openModal, setOpenModal] = useState(false);
    const [modalPlacement, setModalPlacement] = useState('center')
    return <>
        <Navbar fluid rounded>
            <Navbar.Brand href="https://flowbite-react.com">
                {/* <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" /> */}
                <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Cobo</span>
            </Navbar.Brand>
            <div className="flex md:order-2">
                <Dropdown
                    arrowIcon={false}
                    inline
                    label={
                        <Avatar alt="User settings" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />
                    }
                >
                    <Dropdown.Header>
                        <span className="block text-sm">Cobo</span>
                        <span className="block truncate text-sm font-medium">249725579@qq.com</span>
                    </Dropdown.Header>
                </Dropdown>
                <Navbar.Toggle />
            </div>
            <Navbar.Collapse>
                <Navbar.Link href="/" active>
                    主页
                </Navbar.Link>
                <Navbar.Link href="#">关于我</Navbar.Link>
                <Navbar.Link href="#skill">技能</Navbar.Link>
                <Navbar.Link onClick={() => setOpenModal(true)}>联系我</Navbar.Link>
                <Navbar.Link href="#project">项目</Navbar.Link>


                <Navbar.Link href="/blogs/archive">
                    读书笔记
                </Navbar.Link>

                <Navbar.Link href="/expercise">
                    健身练习
                </Navbar.Link>

                <Navbar.Link href="/tool">在线工具</Navbar.Link>
            </Navbar.Collapse>
        </Navbar>

        <Modal
              show={openModal}
              position={modalPlacement}
              onClose={() => setOpenModal(false)}
            >
              <Modal.Header>联系我</Modal.Header>
              <Modal.Body>



                <div className="flex flex-col gap-2">
                  <div className="grid w-full max-w-[23rem] grid-cols-8 gap-2">
                    <label htmlFor="npm-install" className="sr-only">
                      Label
                    </label>
                    <input id="npm-install" type="text"
                      className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
                      value="249725579@qq.com"
                      disabled
                      readOnly
                    />
                    <Clipboard valueToCopy="249725579@qq.com" label="复制" />
                  </div>
                  <div className="grid w-full max-w-[23rem] grid-cols-8 gap-2">
                    <label htmlFor="npm-install" className="sr-only">
                      Label
                    </label>
                    <input id="npm-install" type="text"
                      className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
                      value="15151467107"
                      disabled
                      readOnly
                    />
                    <Clipboard valueToCopy="15151467107" label="复制" />
                  </div>


                </div>
              </Modal.Body>
              <Modal.Footer>
                {/* <Button onClick={() => setOpenModal(false)}>I accept</Button>
                <Button color="gray" onClick={() => setOpenModal(false)}>
                  Decline
                </Button> */}
              </Modal.Footer>
            </Modal>
    </>
}